<script setup lang="ts">
import { onMounted } from 'vue'
import { defaultMapStore } from '@/store'
import mapComponent from '@/components/mapComponent.vue'
import HomeBottom from '@/components/HomeBottom.vue'
import ChooseCity from '@/components/ChooseCity.vue'
import NoLoadTyphoon from '@/components/NoLoadTyphoon.vue'
import RightBox from '@/components/RightBox.vue'
import MapTools from '@/components/MapTools.vue'
import TaiphoonList from '@/components/TaiphoonList.vue'

onMounted(() => {
  console.log(defaultMapStore().getMap())
})
</script>

<template>
  <map-component />
  <choose-city />
  <map-tools />
  <noLoad-typhoon />
  <right-box />
  <taiphoon-list />
  <home-bottom page="home" />
  <view class="u-fellow u-fellow-left" />
  <view class="u-fellow u-fellow-right" />
</template>

<style lang="scss">
.u-fellow {
  position: absolute;
  top: 50%;
  border-radius: 15%;
  width: 0.6rem;
  height: 1.8rem;
  transform: translateY(-50%);
  color: #fff;
  z-index: 999;
  background-color: rgba(0, 0, 0, .2);
  cursor: pointer;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 40%;
    width: 0.3rem;
    height: 0.3rem;
    border: 1px solid #fff;
  }
}

.u-fellow-left {
  left: 0;

  &::before,
  &::after {
    content: '';
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-135deg);
    animation: color-data-v-01d25092 .8s infinite;
  }

  &::before {
    content: '';
    left: 0.1rem;
  }

  &::after {
    content: '';
    left: 0.32rem;
    animation-delay: .3s;
  }
}

.u-fellow-right {
  right: 0;

  &::before,
  &::after {
    content: '';
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
    animation: color-data-v-01d25092 .8s infinite;
  }

  &::before {
    content: '';
    right: 0.32rem;
  }

  &::after {
    content: '';
    right: 0.1rem;
    animation-delay: .3s;
  }
}

@keyframes color-data-v-01d25092 {
  50% {
    opacity: .3;
  }
}
</style>
